<template>
  <view class="container">
    <!-- <view class="container-title">
	  	请选择您的反馈类型
	  </view> -->
    <!-- 竖向菜单列表 -->
    <view class="menu-list">
      <view v-for="(item, index) in menuItems" :key="index" class="menu-item" @click="onMenuItemClick(item)">
        <!-- 菜单文字 -->
        <text class="menu-text">{{ item.name }}</text>
        <!-- 右箭头图标 -->
        <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

      host: this.$apiFun.host,
      // 菜单项数据
      menuItems: [
        {
          id: 'business_license',
          name: '营业执照',
          path: '/page_wallet/qualificationInfo',
          src: '',
        },
        {
          id: 'performance_license',
          name: '演出许可证',
          path: '/page_wallet/qualificationInfo',
          src: '',
        },
        {
          id: 'icp_and_edi',
          name: 'icp&edi证书',
          path: '/page_wallet/qualificationInfo',
          src: '',
        },
      ],
    }
  },
  onLoad() {
    this.init()
  },
  methods: {
    // 字典
    async init() {
      let data = await this.$apiFun.getApi(this.$api.configInfoApi, {
        itemKey: 'qualification_certificates',
      })
      let description = JSON.parse(data.value)
      this.menuItems.forEach((item) => {
        for (const key in description) {
          if (item.id == key) {
            item.src = this.host + description[key]
          }
        }
      })
      console.log('this.menuItems', this.menuItems)

    },
    // 菜单项点击事件
    onMenuItemClick(item) {
      uni.navigateTo({
        url: item.path + '?src=' + item.src, // 跳转到对应页面
      })
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
.container {
  height: 100vh;
  background: #000000;
}

.container-title {
  font-size: 32rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20rpx;
}

.menu-list {
  .menu-item {
    box-sizing: border-box;
    padding: 0 20rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
    background-color: rgba(255, 255, 255, .1);
  }

  .menu-item:last-child {
    border-bottom: none;
  }

  .menu-text {
    font-size: 32rpx;
    color: rgba(255, 255, 255, 1);
  }

  .arrow-icon {
    width: 18rpx;
    height: 18rpx;
  }
}
</style>